﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="/Js/common.js"></script>
    <script type="text/javascript" src="/Js/Control/jqPaginator.js"></script>
    <script type="text/javascript" src="/Js/plugin/handlebars.min.js"></script>
    <style>
        .demo { }

        .pagination2 { height: 30px; margin: 10px 0; }
        .pagination2 a { text-decoration: none; border: solid 1px #c0d3e6; color: #333; border-left-width: 0; height: 24px !important; }
        .pagination2 a { height: 24px !important; display: block; float: left; padding: 0 10px; text-align: center; line-height: 24px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
        .pagination2 .active { background-color: #6babdd; color: #fff; padding: 0 10px; border: solid 1px #5c95c1; }
        .pagination2 .prev { border: solid 1px #c0d3e6; }
        .pagination2 .next { border-left-width: 0; border-right-width: 1px; }
        .pagination2 .active.prev, .pagination2 .active.next { color: #dcdcdc; border-color: #efefef; background: #fff; }
        .pagination2 a:hover { background-color: #cde4f8; }
        .pagination2 .active:hover { background-color: #6babdd; }
        .pagination2 a.disabled { display: none; }
    </style>
</head>
<body>
    <script type="text/x-handlebars-template" id="tpi-fucosImages-item" >
        {{#each this}}
        <div>
            {{Title}}-{{AddTime}}-{{ReceiveOrgName}}
        </div>
        {{/each}}
    </script>
    <div id="nr">

    </div>
    <div class="demo">
        <p id="demo3-text"></p>
        <div id="demo3" class="pagination2"></div>
    </div>
    <script type="text/javascript">

        $("#demo3").jqPaginator({
            totalPages: 100,
            pageSize: 10,
            currentPage: 1,
            first: '<a class="first" href="javascript:void(0);">首页<\/a>',
            prev: '<a class="prev" href="javascript:void(0);">上一页<\/a>',
            next: '<a class="next" href="javascript:void(0);">下一页<\/a>',
            last: '<a class="last" href="javascript:void(0);">末页<\/a>',
            page: '<a href="javascript:void(0);">{{page}}<\/a>',
            onPageChange: function (n) {

                var Page = {};
                Page.rows = 10;
                Page.pageNumber = n;

                $.InvokeAjax("PageService/ICheck", "GetListPages", { Page: Page }, true, function (data) {
                    var obj = $.StrToJson(data).Results;

                    $('#demo3').jqPaginator('option', {
                        totalPages: obj.Page.total,
                        totalPages: obj.Page.pages
                    });


                    $('#tpi-fucosImages-item').html("");
                    var compiler = Handlebars.compile($('#tpi-fucosImages-item').html());//模板
                    $('#tpi-fucosImages-item').html(compiler(obj.Ret));
                });
            }
        });


    </script>
</body>
</html>
